<!DOCTYPE html>
<html>
<head>
    <title>执行结果</title>
    <link rel="stylesheet" href="bootstrap.min_v5.css">
    <link rel="icon" href="/static/favicon.ico" type="image/png">
    <style>
        #divLoading {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .loader {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #ccc;
            border-top: 3px solid #007bff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .my-content {
            overflow-wrap: break-word;
            max-height: 320px;
            overflow-y: auto;
            padding: 12px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
    </style>
</head>
<body style="padding: 10px">
<div id="content"></div>
<div id="tableArea"></div>
<div id="divLoading"><span class="loader"></span>loading....</div>
<script>
    window.addEventListener("message", function (e) {
        try {
            var msg = JSON.parse(e.data);
            if (msg.type === "updateTable") {
                document.getElementById("tableArea").innerHTML = msg.html;
            } else if (msg.type === "showLoading") {
                document.getElementById("divLoading").innerHTML = msg.html;
            } else {
                document.getElementById("content").innerHTML += msg.html;
            }
        } catch {
            document.getElementById("content").innerHTML += e.data;
        }
    }, false);
</script>
</body>
</html>